<!-- 求职意向 -->
<template>
	<view class="JobIntention">
		<view class="BasicsBox">
			<view class="leftBox">
				求职类型
			</view>
			<view class="RightBox">
				<view class="tag" @click="checkOB('WorkType',0)" :class="{'checkTag':user.WorkType==0}">
					全职
				</view>
				<view class="tag" @click="checkOB('WorkType',1)" :class="{'checkTag':user.WorkType==1}">
					兼职
				</view>
				<view class="tag" @click="checkOB('WorkType',2)" :class="{'checkTag':user.WorkType==2}">
					实习
				</view>
			</view>
		</view>
		<view class="BasicsBox" @click="zhiwei">
			<view class="leftBox">
				<view class="">
					期望职位
				</view>
				<view class="Address" :style="{color:user.PositionName?'#000':'#C1C1C1'}">
					{{user.PositionName?user.PositionName:'请选择期望职位'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="ExpectedIndustry">
			<view class="leftBox">
				<view class="">
					期望行业
				</view>
				<view class="Address" :style="{color:user.IndustryTitles?'#000':'#C1C1C1'}">
					{{user.IndustryTitles?user.IndustryTitles:'请选择期望行业'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="show2=true">
			<view class="leftBox">
				<view class="">
					期望城市
				</view>
				<view class="Address" :style="{color:user.PcaAddress?'#000':'#C1C1C1'}">
					{{user.PcaAddress?user.PcaAddress:'请选择期望城市'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="show1=true">
			<view class="leftBox">
				<view class="">
					期望薪资
				</view>
				<view class="Address" :style="{color:user.MinWage||user.Negotiable?'#000':'#C1C1C1'}">
					{{user.Negotiable?'面议':user.MinWage?user.MinWage+'k-'+user.MaxWage+'k':'请选择期望薪资'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<u-picker :show="show1" ref="uPicker" :columns="columns1" keyName="label" @confirm="confirm1"
			@cancel="show1=false" @change="changeHandler" :defaultIndex="defaultIndex"></u-picker>
		<u-picker :show="show2" ref="uPicker2" :columns="columns2" keyName="label" @confirm="confirm2"
			@cancel="show2=false" @change="changeHandler2" :defaultIndex="defaultIndex2"></u-picker>
	</view>
</template>

<script>
	import area from '@/pages/component/area.js'
	export default {
		data() {
			return {
				monery: [],
				show1: false,
				columns1: [
					[{
						label: '面议',
						id: '面议'
					}],
					[]
				],
				defaultIndex: [],
				show2: false,
				columns2: [],
				defaultIndex2: [],
				filter: ['北京市', '上海市', '重庆市', '天津市'],
			}
		},
		props: {
			user: {
				typeof: Object,
				default: {

				}
			}
		},
		methods: {
			checkOB(name, value) {
				let user = JSON.parse(JSON.stringify(this.user))
				user[name] = value
				this.$emit('update:user', user)
			},
			xinzi() {
				for (let i = 1; i < 250; i++) {
					this.columns1[0].push({
						label: i + 'k',
						id: i
					})
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					value,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let arr = []
					if (value[0].label !== '面议') {
						this.columns1[0].forEach((val, key) => {
							if (index < key) {
								arr.push({
									label: key + 'k',
									id: key
								})
							}
						})
					}
					picker.setColumnValues(1, arr)
				}
			},
			confirm1(val) {
				let user = JSON.parse(JSON.stringify(this.user))
				if (val.value[0].id === '面议') {
					user.Negotiable = true
					user.MinWage = 0
					user.MaxWage = 0
				} else {
					// 薪资待遇 最低最高
					user.MinWage = val.value[0].id
					user.MaxWage = val.value[1].id
					user.Negotiable = false
				}
				this.$emit('update:user', user)
				this.show1 = false
			},
			confirm2(val) {
				this.user.ProvinceCode = val.value[0].value
				this.user.CityCode = val.value[1] ? val.value[1].value : ''
				this.user.PcaAddress = val.value[0].label
				if (val.value[1] !== undefined) {
					this.user.PcaAddress = this.user.PcaAddress + '-' + val.value[1].label
				}
				this.show2 = false
			},
			changeHandler2(e) {
				const {
					columnIndex,
					index,
					value,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker2
				} = e
				if (columnIndex === 0) {
					if (this.filter.indexOf(value[0].label) != -1) {
						picker.setColumnValues(1, [])
					} else {
						picker.setColumnValues(1, this.columns2[0][index].children)
					}

				}
			},
			//期望行业进入
			ExpectedIndustry() {
				let user = [],
					IndustryIds = [],
					IndustryTitles = []
				if (this.user.IndustryIds) {
					IndustryIds = this.user.IndustryIds.split('、')
					IndustryTitles = this.user.IndustryTitles.split('、')
					IndustryIds.forEach((val, k) => {
						user.push({
							value: IndustryIds[k],
							text: IndustryTitles[k]
						})
					})
				}

				uni.navigateTo({
					url: '/pages/views/packageB/type-jobhunting/resume/ExpectedIndustry?hyVal=' + JSON.stringify(
						user)
				});
			},
			// 期望行业
			getHangyeSel(val) {
				let IndustryIds = '',
					IndustryTitles = ""
				val.forEach((value, index) => {
					IndustryIds = IndustryIds + value.value
					IndustryTitles = IndustryTitles + value.text
					if (index < val.length - 1) {
						IndustryIds = IndustryIds + '、'
						IndustryTitles = IndustryTitles + '、'
					}
				})
				let user = JSON.parse(JSON.stringify(this.user))
				user.IndustryIds = IndustryIds
				user.IndustryTitles = IndustryTitles
				this.$emit('update:user', user)
			},
			zhiwei() {
				let data = {}
				data.titleName = '期望职位'
				data.Content = '您选择的期望职位将用于为您推荐更合适的岗位'
				data.title = 'leibie'
				uni.navigateTo({
					url: '/pages/views/packageC/type-recruit/zhiwei/zhiwei-page?data=' + JSON.stringify(data)
				})
			},
			getValue(val) {
				let user = JSON.parse(JSON.stringify(this.user))
				user.PositionName = val.FullName
				user.PositionId = val.Id[val.Id.length - 1]
				user.Category3 = val.Id[2] ? val.Id[2] : ''
				user.Category2 = val.Id[1] ? val.Id[1] : ''
				user.Category1 = val.Id[0]
				this.$emit('update:user', user)
			},
		},
		created() {
			this.xinzi()
			this.columns2 = [area, []]
		},
		mounted() {
			uni.$on('getHangyeSel', this.getHangyeSel)
		},
		onUnload() {
			uni.$off("getHangyeSel");
		},
	}
</script>

<style lang="scss" scoped>
	.JobIntention {
		display: flex;
		flex-direction: column;
		font-family: PingFang SC-Medium;
		color: #333;

		.BasicsBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.leftBox {}

			.Address {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.RightBox {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-weight: 600;

				.tag {
					box-sizing: border-box;
					padding: 10rpx 0rpx;
					width: 140rpx;
					text-align: center;
					background-color: #F7F8FA;
					margin-right: 10rpx;
					border-radius: 8rpx;
				}

				.checkTag {
					color: #3476FE !important;
					border: 1rpx solid #3476FE !important;
					background-color: #F1F8FF !important;
				}
			}
		}
	}
</style>